<!-- 分类列表 -->
<template>
	<view class="container">
		<text class="title">农用物资，请选择二级类目</text>
		<view class="list">
			<view class="list-item" v-for="(item, index) in list" :key="index"
				@touchstart="handleTouchstart($event, index)" @touchmove="handleTouchmove" @touchend="handleTouchend"
				:style="{'transform': `translateX(${item.moveDistance}px)`}">
				<text class="name">{{item.name}}</text>
				<button class="edit-btn btn-transition-scale9">编辑</button>
				<button class="delete-btn" @click="handleDelete(index)">删除</button>
			</view>
		</view>
	</view>
	<!-- 用于获取删除按钮的物理宽度 -->
	<view id="delete-btn-width" style="width: 120rpx;"></view>
</template>

<script setup>
	import { ref } from "vue";
	import listBehavior from "./list-behavior.js";

	const list = ref([{
			name: '舒绝饵剂',
			moveDistance: 0,
		},
		{
			name: '舒绝饵剂',
			moveDistance: 0,
		},
		{
			name: '舒绝饵剂',
			moveDistance: 0,
		},
		{
			name: '舒绝饵剂',
			moveDistance: 0,
		}
	])
	// 列表的滑动行为
	const { handleTouchstart, handleTouchmove, handleTouchend } = listBehavior(list);
	
	// 删除
	const handleDelete = (index) => {
		uni.showModal({
			title: '提示',
			content: '确定要删除该类型吗',
			success: (res) => {
				if (!res.confirm) return;
				list.value.splice(index, 1);
			}
		})
	}
</script>

<style lang="scss" scoped>
	.container {
		.title {
			display: block;
			font-size: 28rpx;
			color: #222222;
			line-height: 1.5;
			padding: 10rpx 0 30rpx 40rpx;
		}
	}

	.list {
		overflow: hidden;

		&-item {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 90rpx;
			padding-left: 40rpx;
			padding-right: 25rpx;

			&::after {
				position: absolute;
				bottom: 0;
				right: 0;
				content: '';
				display: block;
				width: calc(100% - 40rpx);
				height: 1px;
				background-color: #E5E5E5;
				transform: scaleY(0.5);
			}

			.name {
				flex-grow: 1;
				width: 0;
				font-size: 28rpx;
				color: #222222;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.edit-btn {
				width: 102rpx;
				height: 50rpx;
				font-size: 24rpx;
				color: #FE3333;
				text-align: center;
				line-height: 50rpx;
				background: #FFDDDD;
				border-radius: 25rpx;
			}

			.delete-btn {
				position: absolute;
				right: -120rpx;
				top: 0;
				width: 120rpx;
				height: 90rpx;
				font-size: 30rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 90rpx;
				background: #FE3333;
			}
		}
	}
</style>